<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'PersonalCenter.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="css/flower.css">
<link rel="stylesheet" type="text/css" href="css/flowerYang.css">
<link rel="stylesheet" type="text/css" href="css/flowerShen.css">
<link rel="stylesheet" type="text/css" href="css/flowerPre.css">
<style type="text/css">
    #uplocp{
        width: 80px;
        height: 80px;
        position: absolute;
        top: 111px;
        left: 207px;
        opacity: 0;
    }

    .consigneeModal-btn {
        width: 108px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        color: white;
        font-size: 13px;
        background: #FF734C;
        background: linear-gradient(90deg, #FF734C 0%, #FF3D12 100%);
        border-radius: 20px;
        display: inline-block;
        cursor: pointer;
    }
    .consigneeModal-btn-grey {
        color: #71797F;
        background: #FFFFFF;
        border: 1px solid #E9ECF0;
    }
    .layer-title {
        margin: 40px 0 36px;
        font-size: 18px;
        line-height: 26px;
        font-weight: bold;
        text-align: center;
        color: #232628;
    }
    .layer-form-box {
        height: 36px;
        border: 1px solid #E9ECF0;
        border-radius: 2px;
        overflow: hidden;
    }
    .layer-form-item .err-tip {
        height: 28px;
        padding-left: 4px;
        margin: 0;
        font-size: 12px;
        line-height: 20px;
        color: #FF734C;
    }
    .layer-form-box input[type=password]{
        height: 100%;
        padding: 0 12px;
        border: none;
        outline: none;
        font-size: 14px;
        line-height: 34px;
        color: #232628;
        vertical-align: top;
    }
    .noClick{
        pointer-events: none;
    }

</style>
</head>


<body class="home">
	<%@ include file="GeTop.jsp"%>
	<!-- 导航 End -->
	<div class="main clearfix">
		<div class="main-container">
			<div class="breadcrumbs">
				<a href="/">首页</a> &gt; <a href="/Member/MemberCenter/">会员中心</a>
				&gt; <a href="/Member/MemberCenter/">会员中心</a>
			</div>
			<div class="wrapper about clearfix">
				<div class="pull-left right-main">
					<div class="main-title">个人信息</div>
					<div class="main-form">
        <form action="PersonalCenterServlet" method="post" enctype="multipart/form-data">
            <input type="hidden" name="id" maxlength="10" placeholder="请输入姓名" value="${UserList.id}">
            <div class="avatar">
                <div class="avatar-img" onclick=""id="newFile">
                    <img src="${UserList.photo}" width="84" height="84" alt="">
                    <input type="hidden" name="defalut-img" maxlength="10" placeholder="请输入姓名" value="${UserList.photo}">
                </div>
                <div class="avatar-btn">
                    修改头像<input type="file" name="img" maxlength="10" id="uplocp" class="fileimg">
                </div>
                <input type="hidden" name="avatar" id="avatar" value="https://img02.hua.com/pchttps://img02.hua.com/pc/assets/img/avatar_default_06.jpg">
                <input id="avatar-upload" type="file" name="avatar" accept="image/*" onchange="selectImage(this.files)" style="display:none;">
            </div>
            <ul class="form-group">
                <li>
                    <label><span>姓</span><span>名</span></label>
                    <div class="form-name form-group-item">
                        <input id="inputName" type="text" name="realname" maxlength="10" placeholder="请输入姓名" value="${UserList.name}">
                        <p class="form-name-len"><span>3</span>/10</p>
                    </div>
                </li>
                <li>
                    <label><span>性</span><span>别</span></label>
                    <div class="form-sex form-group-item">
                        <span class="form-sex-item active" id="Man">男</span>
                        <span class="form-sex-item" id="Wen">女</span>
                        <input id="sex" type="hidden" name="sex" value="男">
                    </div>
                </li>
                <li>
                    <label><span>生</span><span>日</span></label>
                    <div class="form-birthday form-group-item" id="birthday_container">
                        <div class="form-birthday-block">
                            <select class="form-birthday-select clearfix" name="year" id="year">
                                <option value="">年</option>
                                <option value="2021">2021</option>
                                <option value="2020">2020</option>
                                <option value="2019">2019</option>
                                <option value="2018">2018</option>
                                <option value="2017">2017</option>
                                <option value="2016">2016</option>
                                <option value="2015">2015</option>
                                <option value="2014">2014</option>
                                <option value="2013">2013</option>
                                <option value="2012">2012</option>
                                <option value="2011">2011</option>
                                <option value="2010">2010</option>
                                <option value="2009">2009</option>
                                <option value="2008">2008</option>
                                <option value="2007" selected="selected">2007</option>
                                <option value="2006">2006</option>
                                <option value="2005">2005</option>
                                <option value="2004">2004</option>
                                <option value="2003">2003</option>
                                <option value="2002">2002</option>
                                <option value="2001">2001</option>
                                <option value="2000">2000</option>
                                <option value="1999">1999</option>
                                <option value="1998">1998</option>
                                <option value="1997">1997</option>
                                <option value="1996">1996</option>
                                <option value="1995">1995</option>
                                <option value="1994">1994</option>
                                <option value="1993">1993</option>
                                <option value="1992">1992</option>
                                <option value="1991">1991</option>
                                <option value="1990">1990</option>
                                <option value="1989">1989</option>
                                <option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option></select>
                        </div>
                        <div class="form-birthday-block">
                            <select class="form-birthday-select" name="month" id="month">
                                <option value="">月</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03" selected="selected">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
                        </div>
                        <div class="form-birthday-block">
                            <select class="form-birthday-select" name="day" id="day">
                                <option value="">日</option><option value="01">01</option>
                                <option value="02">02</option><option value="03">03</option>
                                <option value="04">04</option><option value="05">05</option>
                                <option value="06">06</option><option value="07">07</option>
                                <option value="08">08</option><option value="09">09</option>
                                <option value="10">10</option><option value="11">11</option>
                                <option value="12">12</option><option value="13">13</option>
                                <option value="14">14</option><option value="15" selected="selected">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
                        </div>
                    </div>
                </li>

                <li>
                    <label>绑定手机</label>
                    <div class="form-tel form-group-item">
                        <span>${phone}</span>
                        <a class="form-bind" href="/Member/AccountSetting/Bind">更换手机</a>
                    </div>
                </li>

                    <li>
                        <label>绑定邮箱</label>
                        <div class="form-email form-group-item">
                            <span>${phone}@u.hua.com</span>
                            <a class="form-bind" href="/Member/AccountSetting/Bind">验证邮箱</a>
                        </div>
                    </li>
                <li>

                    <label>密码</label>
                    <div class="form-email form-group-item">
                        <span></span>
                        <a class="form-bind">修改密码</a>
                    </div>

                </li>
            </ul>
            <div class="form-btn-container">
                <button id="form-submit" type="submit" class="form-submit">保存</button>
            </div>
        </form>
        </div>
				</div>
				<%--隐藏div--%>
                <!--隐藏div  -->
                <div class="modal fade cancel-collection in" id="ding" style="display: none;">
                    <div class="modal-dialog" style="width: 312px;height:228px;margin-top: 290px;">
                        <div class="modal-content" style="padding-bottom: 36px;">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span id="colse">×</span></button>
                            <div class="layer-title">修改密码</div>
                            <div id="bind-email3" class="layer-form-item">
                                <div class="layer-form-box layer-form-input">
                                    <span class="icon icon-email"></span>
                                    <input type="password" placeholder="请输入原密码" id="yuanmima" value="">
                                </div>
                                <p class="err-tip" id="yuanmi"></p>
                            </div>
                            <div id="bind-email" class="layer-form-item">
                                <div class="layer-form-box layer-form-input">
                                    <span class="icon icon-email"></span>
                                    <input type="password" placeholder="请输入新密码" id="xinmima" value="">
                                </div>
                                <p class="err-tip" id="lengthPwd"></p>
                            </div>
                            <div id="bind-email2" class="layer-form-item">
                                <div class="layer-form-box layer-form-input">
                                    <span class="icon icon-email"></span>
                                    <input type="password" placeholder="确认密码" id="xinmi" value="">
                                </div>
                                <p class="err-tip" id="booleanXin"></p>
                            </div>

                            <div class="consigneeModal-btns">
                                <div class="c-btn consigneeModal-btn consigneeModal-btn-grey"id="close" style="width:108px;margin: 0 24px 0 36px;">取消</div>
                                <div class="c-btn consigneeModal-btn" id="cancel-collection-submit" style="width:108px;">确定</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--隐藏div到这  -->
				<!-- 导流-->
				<div class="customer">
					<div class="customer-service customer-service-open">
						<div class="customer-service-title">我是您的专属助理</div>
						<img class="customer-service-img"
							src="https://img02.hua.com/wxmp/hua/wx-code.png">
						<div class="customer-service-sub">扫描二维码加我微信</div>
						<div class="customer-service-hi">Hi~</div>
						<div class="customer-service-close">
							<div class="line"></div>
							<div class="line"></div>
						</div>
					</div>
				</div>
				<%@include file="GeLeft.jsp"%>
			</div>
		</div>
	</div>
	<!-- 尾部导航 -->
	<%@ include file="bottom.jsp"%>
	<script type="text/javascript" src="//img02.hua.com/pc/js/common.js"></script>
	<script type="text/javascript" src="js/flower.js"></script>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#year").val(${DateTime[0]});
        $("#month").val(${DateTime[1]});
        $("#day").val(${DateTime[2]});
        if (${PerSex=='男'}){
            $("#sex").val("男");
            $("#Man").addClass("active").siblings().removeClass("active");
        }else{
            $("#sex").val("女");
            $("#Wen").addClass("active").siblings().removeClass("active");
        }

        $(".form-sex-item").click(function(){
            $(this).addClass("active").siblings().removeClass("active");
            let sex=$(this).text();
            $("#sex").val(sex);
        });
        $('.fileimg').change(function(e){
                /*清空所有img*/
        /*    $(this).parent().parent().children("img").remove();*/

            let fileMsg = e.currentTarget.files;
            for (let i = 0; i < fileMsg.length; i++) {
                let fileName = fileMsg[i].name;
                //类型
                let fileType = fileMsg[i].type;
                console.log(fileType);
                // 判断文件类型
                let type=(fileType.substr(fileType.lastIndexOf("/"))).toLowerCase();
                console.log(type);
                if(type!="/jpg"&&type!="/gif"&&type!="/jpeg"&& type!="/png"){
                    alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");
                    return false;
                }
                let img = $("<img id='im' src='' alt='' style='width: 84px;height: 84px;position: absolute;top: 106px;left: 201px;border-radius: 50%;'>");
                $(img).attr("src","image/user/"+fileName);
                $("#newFile").append(img);

            }
        });
        let yuan=null;
        $(".form-bind").click(function (){
            $("#ding").show();
            $.ajax({
                url:"UserUpdatePwdServlet.shtml",
                type:"get",
                success:function (userStr){
                    let json=JSON.parse(userStr)
                    yuan=json.pwd;
                }
            });
        });
        $("#yuanmima").blur(function (){
            let zhi=$(this).val();
            if(zhi==yuan){
                $("#yuanmi").html("原密码正确");
            }else{
                $("#yuanmi").html("原密码错误");
            }
        });
        $("#xinmima").blur(function (){
            let xin=$(this).val();
            if(xin.length>=6&&xin.length<=16){
                $("#lengthPwd").html("");
            }else {
                $("#lengthPwd").html("密码长度必须大于6并且小于16！");
            }
        });
        $("#xinmi").blur(function (){
            let xin=$(this).val();
            let xinmima=$("#xinmima").val();
            if (xin==xinmima){
                $("#booleanXin").html("");
                $("#cancel-collection-submit").removeClass("noClick");
            }else {
                $("#booleanXin").html("两次密码不一样");
                $("#cancel-collection-submit").addClass("noClick");
            }

        });
        $("#colse").click(function (){
            $("#ding").hide();
        });
        $("#close").click(function (){
            $("#ding").hide();
        });
        $("#cancel-collection-submit").click(function (){
            let xinmima=$("#xinmima").val();
            $.ajax({
                url: "UpdateUserPwdServlet.shtml",
                type: "post",
                data:{"xinmima":xinmima},
                success:function (NewPwd){
                    if(NewPwd){
                        $("#ding").hide();
                        alert("修改成功,身份信息过期，请重新登陆！");
                        location.href="login.jsp";
                    }else {
                        alert("修改失败");
                    }
                }
            });
        });

    });
    </script>
</body>
</html>
